import React from 'react'
import './ddd.css'
import qs from 'query-string'
import { musics } from './api/index'
class ListDetail extends React.Component {
    jump() {
        this.props.history.go(-1);
    }
    constructor() {
        super()
        this.state = {
            arr: []
        }
    }
    componentDidMount() {
        console.log(this.props);
        let id = qs.parse(this.props.location.search).id
        musics(id).then(res => {
            console.log(res, '1111111111111');
            this.setState({
                arr: res
            })
        })
    }
    go(id, name) {
        this.props.history.push(`/list/detail/song?id=${id}&&name=${name}`)
    }
    render() {
        return (
            <div id="listdetail">
                <h2>
                    <img src={require('../../imgs/back.png')} onClick={this.jump.bind(this)}></img>
                    详情列表</h2>
                <div id="nei">
                    {this.state.arr.map(item => {
                        return (
                            <div onClick={this.go.bind(this, item.id, item.name)}>
                                <img src={item.al.picUrl} alt="" />
                                <p>
                                    <span>
                                        {item.al.name}
                                    </span>
                                    <b>
                                        {item.name}
                                    </b>
                                </p>
                            </div>
                        )
                    })}
                </div>
            </div>
        )
    }
}
export default ListDetail